<template>
  <div>
    <header>
      <button class="icon-button" @click="goBack">
        <img
          src="../../../../../images/fae98107-94c4-47d1-ab04-f3e21ba7d864.png"
          alt="Back"
        />
      </button>
      <div class="title">绑定银行卡</div>
      <span></span>
    </header>
    <div class="container">
      <img
        style="width: 80%; margin-top: 5%"
        src="../../../../../images//yinhangka.png"
        alt=""
      />
      <button class="center-button" @click="beback">确定</button>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();

import { useStore } from "@/stores/store";
const store = useStore();
const { bankprocessing, updatebankprocessing } = store;
console.log(store);
const goBack = () => {
  router.go(-1);
};
const beback = () => {
  updatebankprocessing({
    Bankcards: "中国建设银行卡",
    cardtype: "存储卡",
    code: "***  6382  ***  9276",
  });

  console.log(store, "<---userInfo", store.bankprocessing);
  router.push("LookBind");
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中子元素 */
}

.center-button {
  margin-top: 20px;
  width: 50%;
  height: 80px;
  background-color: aqua;
  color: aliceblue;
  border: 0;
  font-size: 36px;
  font-weight: 800;
}
</style>
